<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="addclick">
        <i class="el-icon-plus"></i>新建资源
      </el-button>
    </div>
    <h3 class="titleheader">平台资源分布情况</h3>
    <div class="myChart">
      <div class="Chartitem" id="myChart1"></div>
      <div class="Chartitem" id="myChart2"></div>
      <div class="Chartitem" id="myChart3"></div>
    </div>
    <div class="seachlist">
      <div class="seachitem">
        <div class="name">媒介类型</div>
        <el-select v-model="SearchParam.table_name" placeholder="请选择">
          <el-option
            v-for="item in MJ_list"
            :key="item.id"
            :label="item.name"
            :value="item.table_name"
          ></el-option>
        </el-select>
      </div>
      <div class="seachitem">
        <div class="name">媒 体</div>
        <el-select v-model="SearchParam.media_id" placeholder="请选择">
          <el-option
            v-for="item in SearchObj.media"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="seachitem">
        <div class="name">资源类型</div>
        <el-select v-model="SearchParam.resources_id" placeholder="请选择">
          <el-option
            v-for="item in SearchObj.resources"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="seachitem">
        <div class="name">节目/位置</div>
        <el-select v-model="SearchParam.program_id" placeholder="请选择">
          <el-option
            v-for="item in SearchObj.program"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <div class="seachitem">
        <div class="name">关键字</div>
        <el-input v-model="SearchParam.search_word" style="width:200px;"></el-input>
      </div>
      <div class="seachitem">
        <el-button type="primary" @click.native="seachlist" icon="el-icon-search">搜索</el-button>
      </div>
    </div>
    <div class="listseachs">
      <div class="listseachtop">
        <el-button type="text">导入资源</el-button>
        <el-button type="text">导入刊例</el-button>
      </div>
      <div class="list1">
        <el-table
          :data="tableData"
          :cell-style="$rowstyle"
          :header-cell-style="$headerstyle"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column prop="get_medium.name" label="媒介" align="center"></el-table-column>
          <el-table-column prop="get_media.name" align="center" label="频道"></el-table-column>
          <el-table-column prop="get_resource.name" align="center" label="广告类型"></el-table-column>
          <el-table-column prop="resources_name" align="center" label="资源名称"></el-table-column>
          <el-table-column prop="get_program.name" label="节目位置" align="center"></el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1">草稿</span>
              <span v-if="scope.row.status==2">提交审核</span>
              <span v-if="scope.row.status==3">正常</span>
            </template>
          </el-table-column>
          <el-table-column label="编辑" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看/编辑</el-button>
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
          <el-table-column label="查看客户" align="center" width="100">
            <template slot-scope="scope">
              <el-button @click="v(scope.row)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="totalnum"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- editstatus -->
    <div class="prop" v-if="editstatus">
      <div style="height:10vh;width:100%"></div>
      <div class="warpprop gb" style="height:80vh;">
        <div class="propheader gbheader">
          {{type==1?'添加资源':'编辑资源'}}
          <!-- <p >关闭</p> -->
          <el-button class="close1" type="text" @click="seteditstatus">关闭</el-button>
        </div>
        <div class="hidenlist">
          <div class="comitem">
            <div class="nameitem">媒介</div>
            <el-select
              v-model="fixationParam.table_name"
              :disabled="type==1?false:true"
              style="width:200px;"
              placeholder="请选择"
            >
              <el-option
                v-for="item in MJ_list"
                :key="item.id"
                :label="item.name"
                :value="item.table_name"
              ></el-option>
            </el-select>
          </div>
          <div class="comitem">
            <div class="nameitem">媒体</div>
            <el-select v-model="fixationParam.media_id" style="width:200px;" placeholder="请选择">
              <el-option
                v-for="item in pub_obj.media"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>

          <div class="comitem">
            <div class="nameitem">节目/位置</div>
            <el-select v-model="fixationParam.program_id" style="width:200px;" placeholder="请选择">
              <el-option
                v-for="item in pub_obj.program"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="comitem">
            <div class="nameitem">资源类型</div>
            <el-select v-model="fixationParam.resources_id" style="width:200px;" placeholder="请选择">
              <el-option
                v-for="item in pub_obj.resources"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
          <div class="comitem">
            <div class="nameitem">资源名称</div>
            <el-input v-model="fixationParam.resources_name" style="width:200px;"></el-input>
          </div>
          <div class="comitem">
            <div class="nameitem">关联城市</div>
            <el-select
              filterable
              v-model="fixationParam.city"
              style="width:200px;"
              placeholder="请选择"
            >
              <el-option
                v-for="item in cityList"
                :key="item.city"
                :label="item.city"
                :value="item.city"
              ></el-option>
            </el-select>
          </div>
          <!-- <div class="comitem">
            <el-checkbox v-model="checked">可拆分</el-checkbox>
            <div class="nameitem">最小单元(s)</div>
            <el-input v-model="checkednum" type="number" style="width:70px;"></el-input>
          </div>-->
          <div
            :class="item.type==7 || item.type==5 || item.type==8? 'comitem comitemwidth' :'comitem'"
            v-for="(item,index) in list"
            :key="index"
          >
            <tetxinput
              @func="textinputValue"
              v-if="item.type==1"
              :name="item.field"
              :title="item.name"
              :val="item.val ? item.val:''"
            ></tetxinput>
            <selectIput
              v-if="item.type==2"
              @func="selectValue"
              :item="item.item"
              :name="item.field"
              :title="item.name"
              :val="item.val ? Number(item.val):null"
            ></selectIput>
            <!-- todo -->
            <timeLength
              v-if="item.type==8"
              :val="item.val"
              @func="timeValue"
              :name="item.field"
              :title="item.name"
            ></timeLength>

            <viweClass
              v-if="item.type==9"
              :val="item.val"
              @func="classValue"
              :name="item.field"
              :title="item.name"
            ></viweClass>
            <textareaInPUT
              @func="textareaValue"
              v-if="item.type==5"
              :name="item.field"
              :title="item.name"
              :val="item.val?item.val:''"
            ></textareaInPUT>
            <period
              v-if="item.type==6"
              :val="item.val?item.val:''"
              @func="periodValue"
              :name="item.field"
              :title="item.name"
            ></period>
            <mintime
              @func="mineVlue"
              v-if="item.type==4"
              :val="item.val"
              :name="item.field"
              :title="item.name"
            ></mintime>
            <date
              v-if="(item.type==7  && datelen.length>0)||(type==1 &&item.type==7 )"
              :name="item.field"
              :len="datelen"
              @func="dateValue"
              :title="item.name"
              :val="item.val"
            ></date>
            <radio
              v-if="item.type==3"
              :val="item.val"
              :name="item.field"
              @func="radioValue"
              :title="item.name"
            ></radio>
            <file
              v-if="item.type==10"
              @func="fileValue"
              :title="item.name"
              :val="item.val"
              :name="item.field"
            ></file>
            <split
              v-if="item.type==11"
              :title="item.name"
              @func="splitVaue"
              :val="item.val"
              :name="item.field"
            ></split>
          </div>
        </div>
        <br />
        <br />

        <div class="hidenlist">
          <div class="comitem">
            <date
              name="player_date"
              @func="dateValue_pub"
              title="播出日期"
              :val="this.fixationParam.player_date"
            ></date>
          </div>

          <div class="comitem" style="width:100%;">
            <div class="nameitem">说明</div>
            <el-input type="textarea" style="width:50%;" v-model="fixationParam.remark"></el-input>
          </div>
        </div>
        <div class="pricelist">
          <h4 class style="margin-left:10px;">价格</h4>
          <div class="priceitem" v-for="(item,index) in priceParam" :key="index">
            <div class="price_item_item">
              <div class="price_nmae">时间</div>
              <el-date-picker
                v-model="item.param.time"
                style="width:220px;margin:0px 10px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
            <div class="price_item_item">
              <div class="price_nmae">长度(S)</div>
              <el-input
                v-model="item.param.long"
                type="number"
                style="width:220px;margin:0px 10px;"
              ></el-input>
            </div>
            <div class="price_item_item">
              <div class="price_nmae">数量</div>
              <el-input v-model="item.param.num" type="number" style="width:220px;margin:0px 10px;"></el-input>
            </div>
            <div class="price_item_item">
              <div class="price_nmae">价格(万元/月)</div>
              <el-input
                v-model="item.param.money"
                type="number"
                style="width:220px;margin:0px 10px;"
              ></el-input>
            </div>
            <div class="price_item_item">
              <div class="price_nmae">限定行业</div>
              <el-checkbox v-model="item.param.status" style="margin:0 10px;">除</el-checkbox>
              <el-select
                v-model="item.param.industry"
                style="width:170px;"
                multiple
                collapse-tags
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in HY_list"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>

            <el-button style="margin:0 10px;" @click="shareclick(index,item)">共享</el-button>
            <el-button type="text" @click="addprice" v-if="index==priceParam.length-1">添加</el-button>
            <el-button type="text" @click="delprice(index)">删除</el-button>
          </div>
        </div>
        <div class="hidenlist">
          <div class="comitem">
            <div class="nameitem">状态</div>
            <el-radio v-model="fixationParam.status" label="1">草稿</el-radio>
            <el-radio v-model="fixationParam.status" label="2">提交</el-radio>
          </div>
          <div class="comitem" v-if="type==2">
            <div class="nameitem" style="margin-left:10px;">变更材料</div>
            <el-upload
              :action="$src+'/api/upload'"
              name="file"
              class="upload-demo"
              :multiple="false"
              :limit="1"
              :file-list="filelist"
              :on-success="successfile"
              :on-remove="remove"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </div>
        </div>
        <div class="sendsave">
          <el-button type="primary">删除</el-button>
          <el-button type="primary" @click.native="saveresouce">保存</el-button>
          <!-- <el-button type="primary">保存并新增</el-button> -->
        </div>
      </div>
    </div>
    <!-- share -->
    <div class="prop" v-show="share">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop gb" style="width:600px;height:300px;overflow-y:auto;">
        <div class="propheader">
          共享部门/单位
          <!-- <p >关闭</p> -->
          <el-button class="close1" type="text" @click.native="setshare">关闭</el-button>
        </div>
        <div class="hidenlist">
          <div class="comitem" v-for="(item,index) in shareList" :key="index">
            <div class="nameitem">{{index==0?'本部门/单位':'其他部门/单位'}}</div>

            <el-cascader
              v-model="item.door_ids"
              style="width:180px;margin-right: 10px;"
              :options="DoorList"
              :props="{ checkStrictly: true, value:'id',label:'name',children:'children'}"
              clearable
            ></el-cascader>
            <div class="nameitem">价格折扣</div>
            <el-input style="width:70px;margin-right:10px;" type="number" v-model="item.dis"></el-input>
            <el-button type="text" @click.native="addshare" v-if="index==shareList.length-1">添加</el-button>
            <el-button type="text" @click.native="delshare(index)">删除</el-button>
          </div>
        </div>

        <div class="sendsave" style="margin-top:20px;">
          <el-button type="primary" @click="setshare">删除</el-button>
          <el-button type="primary" @click="saveshare">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import tetxinput from "./ResourceComponte/text";
import selectIput from "./ResourceComponte/select";
import viweClass from "./ResourceComponte/viweClass";
import timeLength from "./ResourceComponte/timeLength";
import textareaInPUT from "./ResourceComponte/textarea";
import period from "./ResourceComponte/period";
import date from "./ResourceComponte/date";
import file from "./ResourceComponte/file";
import radio from "./ResourceComponte/radio";
import mintime from "./ResourceComponte/min-time";
import split from "./ResourceComponte/split";

import { mediaList, getDoorList } from "@/api/System.js";
import {
  getadd_resources,
  AddResources,
  GETresource_list,
  getecherats,
  inforesource,
  editinforesource,
  city_repair
} from "../../api/Salesman.js";
import { getDropdown } from "../../api/Market.js";
export default {
  components: {
    tetxinput,
    selectIput,
    timeLength,
    file,
    split,
    period,
    textareaInPUT,
    date,
    mintime,
    radio,
    viweClass
  },
  data() {
    return {
      list: [],
      type: 1,
      checked: true,
      checkednum: "",
      filelist: [],
      value: "",
      remark_pub: "",
      city_pub: "",
      radio: "1",
      comdata: {},
      tableData: [],
      //选择周几时的日期范围
      datelen: [],
      //媒介列表
      MJ_list: [],
      fixationParam: {
        table_name: "",
        media_id: "",
        resources_name: "",
        program_id: "",
        resources_id: "",
        status: "1",
        file_path: "",
        city: "",
        remark: "",
        player_date: ""
      },
      //存放固定下拉框的对象
      pub_obj: {},
      share: false,
      //点击共享时的下标
      priceIndex: "",
      //共享时的数组
      shareList: [{ door_id: "", dis: "", door_ids: [] }],
      //部门列表
      DoorList: [],
      //行业列表
      HY_list: [],
      //资源编辑状态
      editstatus: false,
      //状态
      status: "1",
      priceParam: [
        {
          share: [{ door_id: "", dis: "", door_ids: [] }],
          param: {
            time: [],
            long: "",
            num: "",
            money: "",
            industry: "",
            status: false
          }
        }
      ],
      cityList: [],
      ID: "",
      SearchParam: {
        table_name: "",
        media_id: "",
        program_id: "",
        resources_id: "",
        search_word: ""
      },
      page: 1,
      totalnum: 0,
      SearchObj: {},
      echartsObjs: {},
      all_y: [],
      all_x: [],
      info: {},
      media_y: [],
      media_x: [],
      resources_y: [],
      resources_x: [],
      starttime: "",
      player_date: ""
    };
  },
  mounted() {},
  created() {
    this.starttime = Math.floor(new Date().getTime() / 1000);
    console.log(this.starttime);
    this.getcity_repair();
    this.getecheartsInfo();
    this.getmediaList();
    // this.add_resources()
    this.getDoor();
    this.getDropdownlist();
    this.GETresourceList();
  },
  methods: {
    //获取城市列表
    getcity_repair() {
      city_repair().then(res => {
        console.log(res);
        if (res.code == 200) {
          this.cityList = res.data;
        }
      });
    },
    remove() {
      this.fixationParam.file_path = "";
    },
    successfile(res) {
      if (res.code == 200) {
        this.fixationParam.file_path = res.data.path;
      }
    },
    fileValue(e) {
      this.comdata[e.name] = e.val;
    },
    //获取图表数据
    getecheartsInfo() {
      getecherats().then(res => {
        if (res.code == 200) {
          this.echartsObjs = res.data;
          if (this.echartsObjs.length > 0) {
            this.echartsObjs.forEach(element => {
              this.all_y.push(element.index.val);
              this.all_x.push(element.index.name);
            });
          }
          this.echartsObjs[0].media.forEach(element => {
            this.media_y.push(element.val);
            this.media_x.push(element.name);
          });
          this.echartsObjs[0].resources.forEach(element => {
            this.resources_y.push(element.val);
            this.resources_x.push(element.name);
          });

          this.drawLine1();
          this.drawLine2();
          this.drawLine3();
        }
      });
    },
    //点击搜索
    seachlist() {
      this.page = 1;
      this.GETresourceList();
    },
    //获取到搜索列表
    GETresourceList() {
      var data = { ...this.SearchParam };
      data.page = this.page;
      data.per = 10;
      GETresource_list(data).then(res => {
        if (res.code == 200) {
          this.page = res.data.current_page;
          this.totalnum = res.data.total;
          this.tableData = res.data.data;
        }
      });
    },
    //获取筛选条件
    getSeach() {
      getadd_resources({ table_name: this.SearchParam.table_name }).then(
        res => {
          if (res.code == 200) {
            //清空所选值

            this.SearchObj = res.data.data_array;
          }
        }
      );
    },

    //
    addclick() {
      this.type = 1;
      this.seteditstatus();
    },
    seteditstatus() {
      if (this.editstatus) {
        this.clearParam();
      }
      this.editstatus = !this.editstatus;
    },
    //设置参数
    clearParam() {
      var arr = [
        {
          share: [{ door_id: "", dis: "", door_ids: [] }],
          param: {
            time: [],
            long: "",
            num: "",
            money: "",
            industry: "",
            status: false
          }
        }
      ];
      //动态参数清空
      this.comdata = {};

      //价格参数清空
      this.priceParam = arr;
      this.fixationParam.media_id = "";
      this.fixationParam.resources_name = "";
      this.fixationParam.program_id = "";
      this.fixationParam.resources_id = "";
      this.fixationParam.status = "1";
      (this.fixationParam.file_path = ""), (this.fixationParam.city = "");
      this.remark = "";
      this.player_date = "";

      //重新获取自定义列表  将值清空
      this.getmediaList();
    },

    //添加资源
    saveresouce() {
      var data = {};
      data.prices = [];
      if (!this.fixationParam.media_id) {
        this.$message({
          message: "媒体不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.fixationParam.program_id) {
        this.$message({
          message: "节目/位置不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.fixationParam.resources_id) {
        this.$message({
          message: "资源类型不能为空",
          type: "warning"
        });
        return;
      }
      if (!this.fixationParam.resources_name) {
        this.$message({
          message: "资源名称不能为空",
          type: "warning"
        });
        return;
      }
      console.log(this.fixationParam);
      // this.fixationParam.player_date=this.player_date
      // return
      var nullstatus = [];
      // if (
      //   (nullstatus = Object.keys(this.comdata).filter(v => !this.comdata[v]))
      //     .length <= 0
      // ) {
      //   console.log("无空值");
      // } else {
      //   this.$message({
      //     message: "所有值不能为空",
      //     type: "warning"
      //   });
      //   return;
      // }
      var pricefalg = false;

      this.priceParam.forEach(element => {
        if (element.param.time.length == 0) {
          pricefalg = true;
          return;
        }

        // if (element.param.industry.length == 0) {
        //   pricefalg = true;
        //   return;
        // }
        if (!element.param.money) {
          pricefalg = true;
          return;
        }
        if (!element.param.num) {
          pricefalg = true;
          return;
        }
        // if (!element.param.long) {
        //   pricefalg = true;
        //   return;
        // }
      });
      if (pricefalg) {
        this.$message({
          message: "价格部分不能有空值",
          type: "warning"
        });
        return;
      }
      data.prices = data.prices.concat(this.priceParam);
      data.prices.forEach(element => {
        var times = [];
        element.param.time.forEach(nt => {
          times.push(new Date(nt).getTime() / 1000);
        });
        element.param.time = times;
        element.param.time = JSON.stringify(element.param.time);
        if (element.param.industry.length > 0) {
          if (element.param.status) {
            let array = [];
            this.HY_list.forEach(hy => {
              element.param.industry.forEach(click => {
                if (hy.id !== click) {
                  array.push(hy.id);
                }
              });
            });
            element.param.industry = array;
            element.param.status = false;
          }
          if (element.param.industry.length > 0) {
            element.param.industry = element.param.industry.join(",");
          }
        }
        if (element.param.industry.length == 0) {
          var arrhy = [];
          this.HY_list.forEach(hyid => {
            arrhy.push(hyid.id);
          });
          element.param.industry = arrhy;
          element.param.status = false;
          element.param.industry = element.param.industry.join(",");
        }
        if (element.share.length > 0) {
          element.share.forEach(e => {
            if (e.door_ids) {
              e.door_ids = e.door_ids.join(",");
            }
          });
        }
      });
      data.public = this.fixationParam;
      data.prvate = this.comdata;
      // return
      if (this.type == 1) {
        AddResources(data).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            this.totalnum = 0;
            this.tableData = [];
            this.page = 1;
            this.GETresourceList();
            this.seteditstatus();
          }
        });
      } else {
        editinforesource({ data: data, id: this.ID }).then(res => {
          if (res.code == 200) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.seteditstatus();
            this.totalnum = 0;
            this.tableData = [];
            this.page = 1;
            this.GETresourceList();
          }
        });
      }
    },
    //获取行业
    getDropdownlist() {
      getDropdown({ type: 1 }).then(res => {
        if (res.code == 200) {
          this.HY_list = res.data;
        }
      });
    },
    //获取部门列表
    getDoor() {
      getDoorList().then(res => {
        if (res.code == 200) {
          this.DoorList = res.data;
        }
      });
    },
    //保存分享部门
    saveshare() {
      this.shareList.forEach(element => {
        let len = element.door_ids.length - 1;
        element.door_id = element.door_ids[len];
      });
      this.priceParam[this.priceIndex].share = this.shareList;
      this.setshare();
    },
    //添加分享部门
    addshare() {
      this.shareList.push({ door_id: "", dis: "", door_ids: [] });
    },
    delshare(index) {
      if (index == 0) {
        return;
      }
      this.shareList.splice(index, 1);
    },
    setshare() {
      if (this.share) {
        this.shareList = [{ door_id: "", dis: "" }];
      }
      this.share = !this.share;
    },
    shareclick(index, item) {
      this.priceIndex = index;
      this.shareList = item.share;
      this.setshare();
    },

    //添加价额列表
    addprice() {
      this.priceParam.push({
        share: [{ door_id: "", dis: "" }],
        param: {
          time: [],
          long: "",
          num: "",
          money: "",
          industry: "",
          status: true
        }
      });
    },
    delprice(index) {
      if (index == 0) {
        return;
      }
      this.priceParam.splice(index, 1);
    },

    //获取动态数据
    add_resources() {
      getadd_resources({ table_name: this.fixationParam.table_name }).then(
        res => {
          if (res.code == 200) {
            //添加时媒介改变
            if (this.type == 1) {
              this.comdata = {};
            }

            this.list = res.data.set_array;
            this.pub_obj = res.data.data_array;
            // this.fixationParam.media_id = "";
            // this.fixationParam.resources_name = "";
            // this.fixationParam.program_id = "";
            // this.fixationParam.status = "1";
            // this.fixationParam.resources_id = "";
          }
        }
      );
    },
    //获取媒介列表
    getmediaList() {
      // {table_name:this.fixationParam.table_name}
      mediaList().then(res => {
        if (res.code == 200) {
          this.MJ_list = res.data.mediums;
          this.fixationParam.table_name = this.MJ_list[0].table_name;
          this.add_resources();
        }
      });
    },
    radioValue(e) {
      this.comdata[e.name] = e.val;
    },
    dateValue_pub(e) {
      console.log(e);
      if (e.val.length < 1) {
        this.fixationParam.player_date = "";
      } else {
        this.fixationParam.player_date = JSON.stringify({
          type: e.type,
          val: e.val
        });
      }
    },
    dateValue(e) {
      if (e.val.length < 1) {
        this.comdata[e.name] = "";
      } else {
        this.comdata[e.name] = JSON.stringify({ type: e.type, val: e.val });
      }
    },
    mineVlue(e) {
      this.comdata[e.name] = JSON.stringify(e.val);
    },
    classValue(e) {
      this.comdata[e.name] = JSON.stringify({ type: e.type, val: e.val });
    },
    periodValue(e) {
      if (!e.data.val) {
        this.comdata[e.name] = "";
      } else {
        this.comdata[e.name] = JSON.stringify(e.data);
      }
    },
    textareaValue(e) {
      this.comdata[e.name] = e.val;
    },
    timeValue(e) {
      this.comdata[e.name] = JSON.stringify(e.val);
      this.datelen = e.val;
    },
    selectValue(e) {
      this.comdata[e.name] = e.val;
    },
    splitVaue(e) {
      if (e.data.val) {
        this.comdata[e.name] = JSON.stringify(e.data);
      } else {
        this.comdata[e.name] = "";
      }
    },
    //text组件
    textinputValue(e) {
      this.comdata[e.name] = e.val;
      // console.log(this.comdata)
    },
    handleSizeChange() {},
    handleCurrentChange(e) {
      this.page = e;
      this.GETresourceList();
    },
    handleClick(row) {
      this.ID = row.id;
      this.type = 2;
      inforesource({ id: row.id }).then(res => {
        if (res.code == 200) {
          this.fixationParam.table_name = res.data.public.table_name;

          this.list = res.data.prvate;
          this.fixationParam.media_id = res.data.public.media_id;
          this.fixationParam.program_id = res.data.public.program_id;
          this.fixationParam.city = res.data.public.city;
          this.fixationParam.remark = res.data.public.remark;
          this.fixationParam.player_date = res.data.public.player_date;
          if (res.data.public.file_path) {
            this.fixationParam.file_path = res.data.public.file_path + "";
            this.filelist = [
              {
                name: "变更材料",
                url: res.data.public.file_path
                  ? res.data.public.file_path + ""
                  : ""
              }
            ];
          }

          this.fixationParam.resources_id = res.data.public.resources_id;

          this.fixationParam.resources_name = res.data.public.resources_name;
          this.fixationParam.status = res.data.public.status + "";
          // this.checked = res.data.public.is_split == 1 ? true : false;
          // this.checkednum = res.data.public.unit_secon;
          this.priceParam = [];
          res.data.prices.forEach(el => {
            el.industry.map(Number);
            if (el.industry.length == this.HY_list.length) {
              el.industry = [];
            }
            if (el.share.length > 0) {
              el.share.forEach(door => {
                delete door.id;
                delete door.medium_price_id;
                delete door.created_at;
                delete door.updated_at;
                delete door.deleted_at;
                if (!door.door_ids) {
                  return;
                }
                door.door_ids = door.door_ids.split(",");
                var add = [];
                door.door_ids.forEach(dos => {
                  add.push(Number(dos));
                });
                door.door_ids = add;
              });
            }
          });

          res.data.prices.forEach(element => {
            this.priceParam.push({
              share: element.share,
              param: {
                time: JSON.parse(element.time),
                long: element.long,
                num: element.num,
                money: element.money,
                industry: element.industry.map(Number)
              }
            });
          });
          this.priceParam.forEach(element => {
            var arr = [];
            element.param.time.forEach(el => {
              // el=el*1000
              arr.push(el * 1000);
              // console.log(el)
            });
            element.param.time = arr;
          });
          this.seteditstatus();
        }
      });
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.all_x,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            data: this.all_y
          }
        ]
      });
      myChart.on("click", param => {
        var index = param.dataIndex;
        this.media_y = [];
        this.media_x = [];
        this.resources_y = [];
        this.resources_x = [];
        // console.log( this.echartsObjs[index].media)
        this.echartsObjs[index].media.forEach(element => {
          this.media_y.push(element.val);
          this.media_x.push(element.name);
        });
        this.echartsObjs[index].resources.forEach(element => {
          this.resources_y.push(element.val);
          this.resources_x.push(element.name);
        });
        this.drawLine2();
        this.drawLine3();
      });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.media_x,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            data: this.media_y
          }
        ]
      });
    },
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.resources_x,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: "60%",
            data: this.resources_y
          }
        ]
      });
    }
  },
  watch: {
    "fixationParam.table_name": {
      deep: true,
      handler: function(newV, oldV) {
        this.add_resources();
      }
    },
    "SearchParam.table_name": {
      deep: true,
      handler: function(newV, oldV) {
        this.SearchParam.media_id = "";
        this.SearchParam.program_id = "";
        this.SearchParam.resources_id = "";
        this.SearchParam.search_word = "";
        this.getSeach();
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  height: 40px;
  width: 97%;
  display: flex;
  margin: 0 auto;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.titleheader {
  width: 97%;
  margin: 0 auto;
}
.myChart {
  height: 250px;
  width: 97%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  .Chartitem {
    width: 33%;
    height: 100%;
  }
  #myChart2 {
    // padding-left: 1%;
  }
}
.seachlist {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .seachitem {
    width: 30%;
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    .name {
      width: 90px;
      font-size: 16px;
      font-weight: 600;
    }
  }
}
.listseachs {
  width: 97%;
  height: 40px;
  margin: 0 auto;
  margin-bottom: 400px;
  .listseachtop {
    height: 40px;
    display: flex;
    float: right;
    justify-content: space-between;
    align-items: center;
    width: 150px;
  }
  .list1 {
    width: 100%;
    margin-top: 10px;
  }
}
.block {
  float: right;
}
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.warpprop {
  width: 90%;
  height: 550px;
  overflow-y: auto;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.pricelist {
  width: 95%;
  margin: 10px auto;
  .priceitem {
    width: 100%;
    margin-left: 10px;
    margin-top: 10px;

    .price_item_item {
      display: flex;
      margin: 5px 0;
      align-items: center;
    }
    .price_nmae {
      font-size: 14px;
      // padding: 3px 10px;
      width: 90px;
    }
    display: flex;
    // height: 40px;
    align-items: center;
    flex-wrap: wrap;
    .pricename {
      font-size: 14px;
    }
    .priceleft {
      flex: 1;
      display: flex;
    }
  }
}
.hidenlist {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
  .comitem {
    // width: 30%;
    display: flex;
    align-items: center;
    // margin: 10px;
    margin-top: 10px;
    margin-left: 10px;
    .nameitem {
      font-size: 14px;
      width: 90px;
      // padding: 0 15px;
    }
  }
}
.sendsave {
  width: 200px;
  height: 50px;
  margin: 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gb::-webkit-scrollbar {
  width: 3px;
  background-color: #fff;
}

/*定义滚动条轨道 内阴影+圆角*/
.gb::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: lightgray;
}

/*定义滑块 内阴影+圆角*/
.gb::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgb(208, 208, 218);
}
.comitemwidth {
  width: 100%;
}
</style>